<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>认识小程序云开发 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/127.4f6598f8.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序原理</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>小程序开发技巧</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-official-functions.html" class="sidebar-link">超实用小程序官方能力</a></li><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-gulp.html" class="sidebar-link">小程序 gulp 简单构建</a></li><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-typescript.html" class="sidebar-link">小程序+Typescript</a></li><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-computed.html" class="sidebar-link">使用 computed 计算属性</a></li><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-watch.html" class="sidebar-link">使用 watch 观察属性</a></li><li><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html" class="active sidebar-link">认识小程序云开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#关于-serverless" class="sidebar-link">关于 serverless</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#云开发小程序的能力" class="sidebar-link">云开发小程序的能力</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#解决了什么" class="sidebar-link">解决了什么</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#还要解决什么" class="sidebar-link">还要解决什么</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#什么场景适用" class="sidebar-link">什么场景适用</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-technique/wxapp-cloud.html#向前看" class="sidebar-link">向前看</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发月刊</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>小程序云开发开始公测啦，欢呼欢呼。这里针对云开发小程序的能力整理出了一个简单的报告，欢迎大家一起来探讨~</p> <h2 id="关于-serverless"><a href="#关于-serverless" aria-hidden="true" class="header-anchor">#</a> 关于 serverless</h2> <p>无服务器运算（Serverless computing），又被称为功能即服务（FaaS），是云计算的一种模型。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供。</p> <h2 id="云开发小程序的能力"><a href="#云开发小程序的能力" aria-hidden="true" class="header-anchor">#</a> 云开发小程序的能力</h2> <p><strong>云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力，简言之就是：云能力将会成为小程序的基础能力。</strong></p> <p>小程序云开发目前提供三大基础能力支持：</p> <ul><li>云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码</li> <li>数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库</li> <li>文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理</li></ul> <p>大家可以去看看小程序的文档，也可以参加下公测申请哈：<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank" rel="noopener noreferrer">《小程序·云开发》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <h2 id="解决了什么"><a href="#解决了什么" aria-hidden="true" class="header-anchor">#</a> 解决了什么</h2> <h3 id="天然鉴权"><a href="#天然鉴权" aria-hidden="true" class="header-anchor">#</a> 天然鉴权</h3> <p>小程序中，要使用第三方服务器，需要走较多的流程，如图（参考<a href="https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html" target="_blank" rel="noopener noreferrer">官网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E6%8E%88%E6%9D%83%E6%97%B6%E5%BA%8F%E5%9B%BE.jpg" alt="授权时序图"></p> <p>在云开发小程序中，使用云函数则无需考虑长长的授权链路，可专心写业务代码。</p> <h3 id="零部署，零维护"><a href="#零部署，零维护" aria-hidden="true" class="header-anchor">#</a> 零部署，零维护</h3> <p>一个小程序的上线，除了大家看到的小程序，背后还有网关、计算服务、基础设施管理、数据库、文件服务、缓存服务等等。日常开发中，随便找个后台服务架构之类的交互图，都会长这么复杂（图文无关，来自随便谷歌的图片）：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84.jpg" alt="可怕的服务架构"></p> <p>除去这些服务的部署成本，当然少不了还有它们的维护成本。当然，也可以选择各种第三方服务来组合实现，这里面也会有服务的熟悉、比对等各种烦恼。</p> <p>小程序云开发提供了较完整的服务器架构，结合腾讯云团队的云函数、数据库和文件存储，都可以是相对可靠的服务。如果业务可以使用小程序云开发完成闭环，就能省去不少的开发部署和维护成本。</p> <h3 id="服务稳定性"><a href="#服务稳定性" aria-hidden="true" class="header-anchor">#</a> 服务稳定性</h3> <p>日常开发中，除去业务逻辑，我们还需要完善很多基础能力：日志、监控、告警、数据安全、系统性能。业务增长需要扩容，从前端到后台长链路的定位，数据信息的统计，都是需要手动操心的事情。</p> <p>小程序云开发提供了数据库和文件存储，可在小程序中直接使用，也可以通过云函数去调用，也可以通过小程序云开发的控制台去管理。同时，小程序云开发配备了一些日志、监控和统计分析的功能：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90.png" alt="统计分析功能"> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E7%9B%91%E6%8E%A7%E6%97%A5%E5%BF%97.jpg" alt="监控日志功能"></p> <p>数据存储的安全性、服务的稳定性，都有专业团队来保障，不用自己再操心和踩坑了。</p> <h3 id="弹性的云函数"><a href="#弹性的云函数" aria-hidden="true" class="header-anchor">#</a> 弹性的云函数</h3> <p>或许很多人都不大理解云函数是什么，没关系我也是刚刚才接触。云函数大概是一个可运行的代码管理平台，可用把代码存储到平台上，并提供好环境供代码运行。</p> <p>自动伸缩大概是云函数最特殊和最好用的一个能力了：</p> <ul><li>无服务器云函数支持毫秒级别的实时弹性伸缩，完全根据请求量扩容或缩容</li> <li>动态负载均衡将请求分发至后端近乎无限的函数实例上，完全无需任何手动配置和操作，满足并发量从 0 到成千上万的不同场景</li></ul> <p>更多的能力可参考<a href="https://cloud.tencent.com/product/scf/details" target="_blank" rel="noopener noreferrer">腾讯云 SCF<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</p> <p>云开发小程序的云函数，是通过 Node.js 来执行的。目前来说，涉及的依赖和安装包，都需要在本地安装后，再上传部署方可使用。不过开发小哥哥们说了，后续会提供线上安装的功能。</p> <h3 id="便利的权限控制"><a href="#便利的权限控制" aria-hidden="true" class="header-anchor">#</a> 便利的权限控制</h3> <p>在大多数业务中，都会存在权限控制以及身份管理，如管理员、用户、数据创建者。<strong>而小程序云开发的数据库和文件存储，提供了以下的权限管理方式：</strong> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86.jpg" alt="权限管理方式"></p> <h3 id="万能的-javascript"><a href="#万能的-javascript" aria-hidden="true" class="header-anchor">#</a> 万能的 Javascript</h3> <p>大家都说，全栈只是前端里才有的定义。Node.js 其实只是降低了语言的学习成本，但做服务搭建，该学习的还是学习，该掌握的还是得掌握。前端与后台的差距，并不在于语言，即使是一个很简单的系统架构，前端考虑的会欠缺了很多（个人体验，不能代表各种大神）。</p> <p>云开发小程序，通过提供客户端 API 的方式，封装了很多服务处理和管理维护的过程，使得服务架构对小程序开发者的门槛大大降低。<strong>开发者只需要使用 Javascript 一种语言，结合提供的 API，可以完成小程序的开发、服务的业务逻辑编写、数据管理、用户管理</strong>，也省去了很多系统安全、服务搭建、性能维护等工作。</p> <h2 id="还要解决什么"><a href="#还要解决什么" aria-hidden="true" class="header-anchor">#</a> 还要解决什么</h2> <h3 id="依赖性"><a href="#依赖性" aria-hidden="true" class="header-anchor">#</a> 依赖性</h3> <p>目前来说，**小程序云开发的服务，只能局限在小程序里面使用。存储到数据库和文件存储里的数据，暂无法通过其他方式直接获取（当然，你也可以在小程序里通过 http/https POST 出去）。**这意味着我们暂时还不能依赖小程序云开发的存储来做一些运营端、管理页面、自定义的数据分析等。</p> <p>因为小程序云开发的整个架构设计主要服务于小程序，那么不管是数据库的读写、文件存储的读写，还是云函数的执行触发，都会依赖于小程序。不过，后面应该会有规划将小程序云开发通过鉴权或者授权的机制，让开发者可以从自己的服务器去获取一些信息的吧。</p> <h3 id="服务局限性"><a href="#服务局限性" aria-hidden="true" class="header-anchor">#</a> 服务局限性</h3> <p>小程序以及云开发与外界（其他服务）的连接，基本上都只能基于 http/https 的方式来进行。相对于我们常用的服务间 TCP 的连接方式，可能会慢一点（其实也可以忽略不计啦）。</p> <p>同时，目前的云函数会有超时机制（大概 5 秒），也就是说，<strong>一个函数的执行若是超时了，函数调用会被返回，同时该函数的执行也会被中断</strong>。普通的 CGI 超时了也会执行完毕，这里会有些不一样。</p> <h3 id="稳定性保障"><a href="#稳定性保障" aria-hidden="true" class="header-anchor">#</a> 稳定性保障</h3> <p>新上线的功能，虽然经过了内测，未经过大量的实践，其稳定性和使用性能都待考证。不踩坑是不可能的，这辈子都不会不踩坑的。但相信小程序的开发哥哥们，能保证当前功能的稳定和开发的便捷。毕竟，走得稳才能走得远。</p> <p>但是新技术或者新功能的上线，都需要大量开发者前仆后继地填坑，才能一起成为首批吃鸡腿的小伙伴呀。（嗯，目前为止踩了一些坑，有机会再跟你们分享吧）</p> <h3 id="健全的文档"><a href="#健全的文档" aria-hidden="true" class="header-anchor">#</a> 健全的文档</h3> <p>“程序员最讨厌的两件事：1. 别人没有写文档。2. 自己要写文档。”</p> <p>在新功能上线的初期，文档建设未免都会有些不够完善，当然这也是需要大家多去参与和使用，然后给到反馈和建议，才能做得越来越好。</p> <h2 id="什么场景适用"><a href="#什么场景适用" aria-hidden="true" class="header-anchor">#</a> 什么场景适用</h2> <h3 id="个人开发者"><a href="#个人开发者" aria-hidden="true" class="header-anchor">#</a> 个人开发者</h3> <p>无可厚非地，大概是个人开发者最适合使用小程序云开发的模式了。只需要专注于小程序的开发，完全不用考虑后台服务搭建、数据存储、系统安全、服务器运维等工作，只需要使用云开发提供的一条龙服务，就可以开心地完成小程序的开发了。</p> <h3 id="工具类小程序"><a href="#工具类小程序" aria-hidden="true" class="header-anchor">#</a> 工具类小程序</h3> <p>由于小程序云开发的功能，目前还只能在小程序里面使用，那对于一些小助手、修图工具、阅读工具等一些工具类小程序，这类需要一些小数据的存储，同时也可以配合 http/https 请求的方式来完成完整的功能。</p> <h3 id="复杂逻辑的函数计算"><a href="#复杂逻辑的函数计算" aria-hidden="true" class="header-anchor">#</a> 复杂逻辑的函数计算</h3> <p>“复杂的逻辑放后台。”</p> <p>不管是以前还是现在，虽然前端的能力范围越来越大，但在业务中依然免不了会遇到一些复杂的逻辑，这时候一般大家都会默认把逻辑放后台计算。因为前端的性能和兼容性，总会因环境和平台的变化而变化，同时单线程的模式也限制了一些大数据的计算分析能力。小程序里也暂时没有类似 Web Worker 的能力（小游戏已经有了，小程序听说在规划中）。</p> <p>现在，我们可以把这些复杂的逻辑计算放在云函数中来进行，内存分配、计算性能都是云开发来保障，我们甚至可以结合一些开源库，或是云开发提供的 AI 能力，来做一些以前不好做甚至是做不到的功能。</p> <h3 id="长“缓存”服务"><a href="#长“缓存”服务" aria-hidden="true" class="header-anchor">#</a> 长“缓存”服务</h3> <p>我们经常会使用小程序的缓存来做一些简单的数据缓存，像本地日志、错误信息、告警信息、访问次数等，这些数据可能会被用户手动清除掉（也没有关系），但如果有一个免费又能提供不限时间的存储服务，是否可以将缓存中的数据定期存到小程序云里，然后开发者可以在小程序云开发的控制台里查看这些信息呢？</p> <h2 id="向前看"><a href="#向前看" aria-hidden="true" class="header-anchor">#</a> 向前看</h2> <p>科技在发展，技术一直在变化，作为一个小开发也还是想要拥抱变化和未来的。小程序云开发提供的能力，要改造原有架构来适应或许成本太高，但将其列入未来的可用方案也是不错的方式。</p> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>小程序的开发们都爱低调，但好的东西是要让大家知道的呀~就由我来做这个文章的搬运工吧~<br>
后面也打算做一系列的小程序相关文章，先立个 Flag。懂的东西不够多，能做的就是写下来和大家一起分享了。</p> <p>最后，小程序团队和腾讯云团队棒棒哒，此致敬礼！<br>
PS：祝各位开发者写码愉快！成功吃鸡！</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/wxapp/wxapp-technique/wxapp-cloud.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/wxapp/wxapp-technique/wxapp-watch.html" class="prev">
          使用 watch 观察属性
        </a></span> <span class="next"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html">
          小程序开发月刊第一期（20190114）
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-5848" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty2.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/127.4f6598f8.js" defer></script>
  </body>
</html>
